<template>
  <a-card :bordered="false">
    <div>
      <a-row>
        <a-col :span="24">
          <!--url：指定表格加载时请求的后端接口地址-->
          <!--columns：指定表格列配置项数据-->
          <j-tree-table :url="rootUrl" :columns="columns" :childrenUrl="childrenUrl" queryKey="parentCode" :tableProps="tableProps">
            <!--自定义插槽内容：也就是在任意标签上使用：slot="唯一标识名"-->
            <!--如果有列需要使用该插槽内容进行自定义渲染，只需要使用scopedSlots: { customRender: '插槽标识名' }-->
            <!--注意数据使用问题（text.record才等同于原来的record）-->
            <template slot="unitSlot" slot-scope="text,record,index">
              <span v-if="text.record.unit === -1">省</span>
              <span v-else-if="text.record.unit === 0">市</span>
              <span v-else-if="text.record.unit === 1">区/县</span>
              <span v-else>乡镇/街道</span>
            </template>

            <template slot="statusSlot" slot-scope="text,record,index">
              <a-tag v-if="text.record.status === 1" color="green">可用</a-tag>
              <a-tag v-else color="red">冻结</a-tag>
            </template>

            <template slot="actions" slot-scope="text,record,index">
              <a href="javascript:;" @click="openUpdateModal(text.record)">编辑</a>
            </template>
          </j-tree-table>
        </a-col>
      </a-row>

      <a-modal v-model="updateVisible" title="编辑" @ok="handleAddOk" width="60%">
        <a-form-model :model="updateForm" ref="updateForm" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
          <a-form-model-item label="名称：" prop="name">
            <a-input v-model="updateForm.name"/>
          </a-form-model-item>
          <a-form-model-item label="区域编码：" prop="code">
            <a-input v-model="updateForm.code"/>
          </a-form-model-item>
          <a-form-model-item label="父编码：">
            <a-input v-model="updateForm.parentCode"/>
          </a-form-model-item>
          <a-form-model-item label="标识：" prop="unit">
            <!--省：-1，0:市，1:区/县, 2:乡镇/街道-->
            <a-select v-model="updateForm.unit">
              <a-select-option :value="-1">省</a-select-option>
              <a-select-option :value="0">市</a-select-option>
              <a-select-option :value="1">区/县</a-select-option>
              <a-select-option :value="2">乡镇/街道</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="状态：" prop="status">
            <a-radio-group v-model="updateForm.status">
              <a-radio-button :value="1">可用</a-radio-button>
              <a-radio-button :value="2">冻结</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
//定义引入的js插件
//异步树结构
import JTreeTable from '@/components/jeecg/JTreeTable'

export default {
  components: {JTreeTable},
  data() {
    return {
      /* 表格绑定数据*/
      tableData: [],
      /* 弹窗显示隐藏*/
      updateVisible: false,
      /* 表单控件布局属性*/
      labelCol: {span: 6},
      wrapperCol: {span: 16},
      /* 编辑弹窗回显绑定对象*/
      updateForm: {},
      /* 表单校验规则*/
      rules: {
        name: [
          {required: true, message: '区域名称不能为空', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '区域编码不能为空', trigger: 'blur'}
        ],
      },
      // ===========================异步树表格需要属性========================
      //页面中所有请求后端接口的url
      rootUrl: '/user/njtArea/listRoot',//根节点请求路径
      childrenUrl: '/user/njtArea/listChildren',//子节点加载路径
      //异步树表格配置列数据
      columns: [
        {title: '名称', dataIndex: 'name'},
        {title: '区域编码', dataIndex: 'code'},
        {title: '父编码', dataIndex: 'parentCode'},
        //基于使用数组数据加载表格列方式的自定义渲染，借助插槽Slot
        //开发步骤：
        //1)在页面的表格标签中定义插槽内容（有固定的语言结构要求）
        //2)通过使用scopedSlots: { customRender: '插槽标识名' },
        {
          title: '标识',
          dataIndex: 'unit',
          // 使用关联插槽方式实现自定义渲染（一般需要使用特殊标签或需要设置样式显示内容）
          // 如果使用注释代码方式自定义渲染，注意数据使用问题（text.record才等同于原来的record）
          // scopedSlots: {
          //   customRender: 'unitSlot'
          // }
          //直接使用函数返回文本方式(一般不需要使用其他标签渲染时，首选)
          customRender:(text) =>{
            if (text === -1){
              return  '省';
            }else if(text === 0){
              return  '市';
            }else if(text === 1){
              return  '区/县';
            }else{
              return '乡镇/街道'
            }
          }
        },

        {
          title: '状态',
          scopedSlots: { customRender: 'statusSlot' },
        },
        {
          title: '父编码',
          scopedSlots: { customRender: 'actions' },
        },
      ],
      selectedRowKeys: []
    }
  },
  methods: {
    //表格自带分页条内容切换时触发事件
    openUpdateModal(record) {
      //将事件传入的表格行对象，浅拷贝赋值给弹窗回显对象
      this.updateForm = Object.assign({}, record)
      this.updateVisible = true;
    },
    //编辑弹窗确定按钮操作方法
    handleAddOk() {
      this.$refs.updateForm.validate(valid => {
        if (valid) {//校验通过

        } else {//校验失败
          return false;//阻止继续操作
        }
      });

    },

  },
  computed: {
    tableProps() {
      let _this = this
      return {
        // 列表项是否可选择
        // 配置项见：https://vue.ant.design/components/table-cn/#rowSelection
        rowSelection: {
          selectedRowKeys: _this.selectedRowKeys,
          onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
        }
      }
    }
  }
}
</script>
<style>

</style>